<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <style type="text/css">
      .main{height:100%;}
      .speech-wrap{padding:20px 0px; background:#fff;}
      .list{border-bottom:1px solid #e8e8e8; }
      .hall-note{height:20px; line-height:20px; font-size:18px; color:#c60108; padding-left:10px; margin-top:30px;}
      .hall-tit{
        padding-bottom:20px; line-height:24px;
      }
      .hall-tit-w{margin-top:40px;}
      .hall-tit .left{color: #0099aa; font-size:22px; padding-left: 5px;}
      .hall-tit .left span.icon{width: 10px; display: block; color: #ccc; font-size: 13px; float: left;}
      .hall-tit .left .sn{width: 20px; text-align: center; font-size: 18px; color: #0099aa; float: left;}
      .hall-tit .left .hall-name{padding-left: 5px; float: left; font-size: 20px; color: #0099aa; line-height: 24px;}
      .hall-tit .right{width:90px; text-align: right; padding-right: 10px;}
      .hall-tit .right .map{color: #c60108; font-size: 14px;}

      .list .hall-point{height: 121px; padding: 0px 0px 0px 10px; border-top:1px solid #e8e8e8;}
      .list .border-top{border-top:1px solid #e8e8e8;}
      .list .border-1{border-bottom: 1px solid #e8e8e8;}
      .list .border-2{border-bottom: 1px solid #f8f8f8;}
      .list .hall-point .audio-btn{width:40px; height:40px; display:inline-block; line-height:40px; text-align:center;}
      .list .hall-point .audio-btn i{font-size:30px; line-height:120px; color:#b8b8b8;}
      .list .hall-point .audio-btn i.grey{color:#f0f0f0;}
      .list .hall-point .audio-btn i.am-icon-spin{font-size:18px;}
      .list .hall-point .btn-playing i{color:#c60108;}
      .list .hall-point .audio-wrap{padding-left: 10px; padding-right: 10px; padding-top:30px;}
      .list .hall-point .point{
        width:120px; height:120px; display: inline-block; overflow: hidden;
        background-size:150%; background-position:center center; background-repeat: no-repeat;
      }
      .list .hall-point .arrow{
        display: block;width: 30px;line-height: 60px;font-size: 18px;color: #b8b8b8;text-align: center;
      }
      .list .hall-point .audio-wrap .name{
        height: 35px;line-height: 35px;font-size: 18px;color: #000;
      }
      .list .hall-point .audio-wrap .name .sn{height:35px;line-height:35px; padding-right:2px;}
      .list .hall-point .audio-wrap .name .short-name{
        height: 35px;line-height:35px; overflow:hidden;
      }
      .list .hall-point .audio-wrap .name .marquee {
        width: 168px; height: 35px;line-height: 35px;
        white-space: nowrap;overflow: hidden;box-sizing: border-box;
      }
      .list .hall-point .audio-wrap .name .marquee span {
          display: inline-block;
          -webkit-animation: marquee 15s linear infinite;
          animation: marquee 15s linear infinite;
      }
      /* Make it move */
      @-webkit-keyframes marquee {
          0% {
              -webkit-transform: translate(0%, 0%);
          }
          100% {
              -webkit-transform: translate(-100%, 0%);
          }
      }
      @keyframes marquee {
          0% {
              transform: translate(0%, 0%);
          }
          100% {
              transform: translate(-100%, 0%);
          }
      }
      .list .hall-point .audio-wrap .name .point-name-playing {color: #c60108;}
      .list .hall-point .audio-wrap .name i.am-icon-star {color: #c60108;font-size: 12px;}
      .list .hall-point .audio-wrap .audio {width: 100%; margin-top:5px;}
      .list .hall-point .audio-wrap .audio .bar {
        height: 10px;background-color: #e8e8e8;border: 1px solid #ccc;border-radius: 5px;overflow: hidden;
      }
      .list .hall-point .audio-wrap .audio .bar-playing {border-color: #c40108;}
      .list .hall-point .audio-wrap .audio .bar .played {width: 0;height: 10px;background-color: #c40108;}
      .list .hall-point .audio-wrap .audio .time {
        width:50px; height:20px;line-height:20px;margin-top:-5px;padding-left:10px;color:#b8b8b8;font-size:12px;
      }
      .list .hall-point .audio-wrap .audio .playing-gif{width:20px; height:12px; margin-top:-2px;}
      .list .hall-point .audio-wrap .audio .playing-gif img{vertical-align:top;}
      .list .hall-point .audio-wrap .others{display: block;font-size: 12px;float: left;color: #b8b8b8;margin-top: -4px;}
      .point-extends{
        border-top:1px dashed #e8e8e8; /* height: 67px; */ padding:15px 0px;
        margin-left:40px;
      }

      .point-extends .audio-btn{width:26px; height:26px; display:inline-block; line-height:50px; text-align:center;}
      .point-extends .audio-btn i{font-size:26px; color:#b8b8b8;}
      .point-extends .audio-btn i.grey{color:#f0f0f0;}
      .point-extends .audio-btn i.am-icon-spin{font-size:15px;}
      .point-extends .btn-playing i{color:#c60108;}

      .point-extends .audio-wrap{padding-left:10px; padding-top:5px;}

      .point-extends .u {
        width:26px; height:26px; border-radius:50%; overflow:hidden; margin-top:7px; margin-left:1px;
      }
      .point-extends .u i{color:#fff;}
      .point-extends .u .am-icon-pause{margin-left:-1px;}

      .point-extends .audio-wrap .name {
        margin-bottom:6px; display:block;line-height:16px;font-size:14px;color:#9e8b60;
      }
      .point-extends .audio-wrap .name .point-name{color: #9e8b60;}
      .point-extends .audio-wrap .name .point-name-playing{color: #c60108;}
      .point-extends .audio-wrap .audio {width: 100%;}
      .point-extends .audio-wrap .audio .bar {height: 10px;background-color: #e8e8e8;border: 1px solid #ccc;border-radius: 5px;overflow: hidden;}
      .point-extends .audio-wrap .audio .bar-playing {border-color: #c40108;}
      .point-extends .audio-wrap .audio .bar .played {width: 0;height: 10px;background-color: #c40108;}

      .point-extends .audio-wrap .audio .title{
        line-height:20px; font-size:14px; color:#999; margin-top:-5px;
      }
      .point-extends .audio-wrap .audio .title .txt{max-width:90%; float:left;}
      .point-extends .r {width:50px; padding:5px 6px 0px 6px; overflow: hidden;}
      .point-extends .r .tag {
        width:38px; height:16px; padding-top:1px; line-height:16px; overflow:hidden; text-align:center;
        font-size:10px; color: #fff; background-color:#9e8b60; border-radius:3px;
      }
      .point-extends .r .time {
        width:38px; height:20px; line-height:20px; text-align:center; color: #b8b8b8; font-size:10px;
      }
      .point-extends .audio-wrap .audio .playing-gif{float:left; margin-left:2px;}
      .point-extends .audio-wrap .audio .playing-gif img{margin-top:2px;}
      .point-extends .audio-wrap .others {display: block;font-size: 12px;color: #b8b8b8;margin-top: -4px;}
    </style>
</head>
<body>
  <div id="App" class="main hide">
    <div class="speech-wrap">
      <div class="list">
          <div v-for="(v, k) in data">

              <div class="hall-tit" :class="{'border-top':k>0}">
                <div class="hall-note" v-if="v.note"><i class="iconfont icon-xia"></i> {{v.note}}</div>
                <div class="dflex hall-tit-w">
                  <div class="left flex-1" @click="listHiddenPoint(k);">
                    <div class="wrap dflex">
                      <span class="icon ico iconfont" :class="{'icon-caretdown':v.hidden_point&&v.list_hidden_point==1, 'icon-caretup':v.hidden_point&&v.list_hidden_point==0}"></span>
                      <div class="sn">{{v.sn}}</div>
                      <div class="hall-name flex-1">{{v.name}}</div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="map" v-if="v.map" @click="viewPic(files[v.map]);">
                      <i class="am-icon-map"></i> {{album.lang?'overview':'位置图'}}
                    </div>
                  </div>
                </div>
              </div>

              <div v-for="(vv, kk) in v.point" v-if="(vv.speech.audio || vv.extend.length>0 || v.list_hidden_point==0)">
                <div class="hall-point dflex">
                  <div class="row-flex" @click="playInit(k, kk, -1);">
                    <div class="audio-btn flex-1" :class="{'btn-playing':vv.speech.playing}">
                      <i class="audio-ico iconfont" :class="{'grey':!vv.speech.audio, 'icon-bofang9':vv.speech.playing==false||playing.paused, 'icon-zanting6':vv.speech.playing&&!playing.paused}"></i>
                    </div>
                  </div>
                  <div class="audio-wrap flex-1">
                    <div class="name dflex" @click="playInit(k, kk, -1);">
                      <div class="sn">{{v.sn}}{{vv.sn}}-</div>
                      <div class="short-name flex-1" v-if="!vv.speech.playing||(vv.speech.playing&&vv.name.length<=name_max_len)">{{vv.short_name}}</div>
                      <div class="marquee flex-1" v-if="vv.speech.playing&&vv.name.length>name_max_len"><span>{{vv.name}}</span></div>
                    </div>

                    <div class="audio dflex" v-if="vv.speech.audio"  v-bind:style="{width:vv.speech.bar_w+'%'}">
                      <div class="bar flex-1"><div class="played"></div></div>
                      <div class="time">{{vv.speech.period_show}}</div>
                      <div class="playing-gif">
                        <img v-if="vv.speech.playing" src="../image/playing.gif">
                      </div>
                    </div>
                    <div v-else class="others">{{album.lang?'No audio available':'暂无语音讲解'}}</div>
                  </div>

                    <div @click="viewPic(files[vv.images]);" class="point" :style="{backgroundImage:'url('+files[vv.images]+')'}"></div>
                </div>

                  <!--扩展讲解-->
                  <div class="point-extends dflex" v-for="(vvv, kkk) in vv.extend" >
                    <div class="row-flex" @click="playInit(k, kk, kkk);">

                      <div class="u" v-if="vvv.avatar.length>0">
                        <img :src="files[vvv.avatar]" height="26" width="26">
                      </div>
                      <div v-else class="audio-btn flex-1" :class="{'btn-playing':vvv.playing}">
                        <i class="audio-ico iconfont" :class="{'grey':!vvv.audio, 'icon-bofang9':vvv.playing==false||playing.paused, 'icon-zanting6':vvv.playing&&!playing.paused}"></i>
                      </div>

                    </div>
                    <div class="audio-wrap flex-1" @click="playInit(k, kk, kkk);">
                      <div class="name">
                          <span class="point-name">{{vvv.name}}，{{vvv.signature}}</span>
                      </div>
                      <div class="audio dflex"> <!--:style="{width:vvv.bar_w+'%'}"-->
                        <div class="flex-1 title">
                          <div class="text-overflow txt">{{vvv.title}}</div>
                          <div class="playing-gif">
                            <img class="playing-gif" v-if="vvv.playing" src="../image/playing.gif">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="r">
                      <div class="tag"><span>{{vvv.keywords.length>0?vvv.keywords:'扩展'}}</span></div>
                      <div class="time">{{vvv.period_show}}</div>
                    </div>
                  </div>
              </div>

          </div>
        </div>
      </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
var vue;
apiready = function(){
  vue = new Vue({
      el: '#App',
      data: {
        did:0,
        aid:0,
        files:[],
        data:[],
        album:{},

        playing:{
          hk:-1,        //当前播放的对象展厅序号
          pk:-1,        //当前播放的对象看点序号
          ek:-1,        //当前播放的对象扩展序号
          paused:true,  //当前播放的音频状态（播放中/已暂停）
        }
      },
      methods: {
          playInit:function(hk, pk, ek){
            if(ek>=0){
              if(!this.data[hk].point[pk].extend[ek].audio){
                return false;
              }
            }else{
              if(!this.data[hk].point[pk].speech.audio){
                return false;
              }
            }
            api.sendEvent({
                name: 'PlayEvent',
                extra: {hk:hk, pk:pk, ek:ek}
            });
          },
          playingOne:function(playing){
            var that = this;
            if(playing.ek==-1){
              that.data[playing.hk].point[playing.pk].speech.playing = true;
            }else{
              that.data[playing.hk].point[playing.pk].extend[playing.ek].playing = true;
            }
            that.playing.paused = playing.paused;
          },
          playingStopOne:function(playing){
            var that = this;
            if(playing.ek==-1){
              that.data[playing.hk].point[playing.pk].speech.playing = false;
            }else{
              that.data[playing.hk].point[playing.pk].extend[playing.ek].playing = false;
            }
            that.playing.paused = playing.paused;
          },
          playingStopAll:function(){
            var that = this;
            for(var i in that.data){
              for(var j in that.data[i].point){
                if(that.data[i].point[j].speech){
                  that.data[i].point[j].speech.period_showing = that.data[i].point[j].speech.period_show;
                  that.data[i].point[j].speech.playing = false;
                }
                for(var k in that.data[i].point[j].extend){
                  that.data[i].point[j].extend[k].period_showing = that.data[i].point[j].extend[k].period_show;
                  that.data[i].point[j].extend[k].playing = false;
                }
              }
            }
            that.playing.paused = true;
          },
          listHiddenPoint:function(_k){
            var flag = this.data[_k].list_hidden_point==1?0:1;
            this.data[_k].list_hidden_point = flag;
          },
          viewPic: function(images){
            api.sendEvent({
                name: 'PicViewEvent',
                extra: {images:images}
            });
          }
      },
      created: function() {
        var that = this;

        var did = api.pageParam.did;
        that.did = did;

        var aid = api.pageParam.aid;
        that.aid = aid;

        that.files = $api.getStorage('files');

        var data = $api.getStorage('plays')[aid];

        var album = data.album;
        that.album = album;

        var _d = data.rows;

        var name_max_len = that.album.lang?24:10;
        that.name_max_len = name_max_len;

        for(var i in _d){

          _d[i].list_hidden_point = 1;
          _d[i].big_hidden_point = 1;
          _d[i].point_audio_num = 0;  //有语音的看点的个数

          for(var j in _d[i].point){
            //看点标题
            if(_d[i].point[j].name.length>name_max_len){
              _d[i].point[j].short_name = _d[i].point[j].name.substr(0, name_max_len)+'...';
            }else{
              _d[i].point[j].short_name = _d[i].point[j].name;
            }
            if(_d[i].point[j].speech){
              var period_show = common.getPeriodShow(_d[i].point[j].speech.period);
              _d[i].point[j].speech.period_showing = _d[i].point[j].speech.period_show = period_show;
              var bar_w= parseInt(_d[i].point[j].speech.period/360*100)+60;
               if(bar_w>90){bar_w=90;}
               _d[i].point[j].speech.bar_w = bar_w;
               _d[i].point[j].speech.playing = false;
            }
            for(var k in _d[i].point[j].extend){
              var period_show_extend = common.getPeriodShow(_d[i].point[j].extend[k].period);
              _d[i].point[j].extend[k].period_show = period_show_extend;
              _d[i].point[j].extend[k].period_showing = period_show_extend;
              var bar_w = parseInt(_d[i].point[j].extend[k].period/360*100)+60;
              if(bar_w>90){bar_w=90;}
              _d[i].point[j].extend[k].bar_w = bar_w;
              _d[i].point[j].extend[k].playing = false;
            }
            if(!_d[i].point[j].speech.audio && _d[i].point[j].extend.length<1){
              _d[i].hidden_point = true;
            }
            if(_d[i].point[j].speech.audio){
              _d[i].point_audio_num += 1; //计算有语音的看点的个数
            }
          }
        }
        that.data = _d;


        //播放的一推监听
        api.addEventListener({
            name: 'Playing'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingOne(playing);
        });

        api.addEventListener({
            name: 'PlayingPause'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingOne(playing);
        });

        api.addEventListener({
            name: 'PlayingStop'
        }, function(ret, err) {
          var playing = ret.value;
          that.playingStopOne(playing);
        });

        api.addEventListener({
            name: 'PlayingStopAll'
        }, function(ret, err) {
          that.playingStopAll();
        });

        $api.removeCls($api.byId('App'), 'hide');

        setTimeout(function(){
          api.parseTapmode();
        }, 1000);

      }
  });
}

</script>
</html>
